<template>
  <div>
    <h1>App</h1>
    <button id="box" @click="handleClick">{{ count }}</button>

    <button @click="person.city.name = '广州'">
      {{ person.name }} - {{ person.age }} - {{ person.city.name }}
    </button>
  </div>
</template>

<script>
import { ref, watch, reactive } from "vue";

export default {
  setup() {
    const count = ref(10);

    const person = reactive({
      name: "张三",
      age: 18,
      city: {
        name: "深圳",
      },
    });

    const handleClick = () => {
      count.value++;
      count.value++;
      count.value++;
      count.value++;
    };

    // 1. 监听一个 ref 数据
    watch(
      count,
      (newVal, oldVal) => {
        console.log("count change 了", newVal, oldVal);
        console.log(document.querySelector("#box").innerHTML);
      },
      {
        // immediate: true, // 回调函数会立即执行一次
        deep: true, // 开启深度监听
        /**
         * 回调的执行时机 Vue3 新增的配置项
         *    1. pre    真实DOM更新前【默认】
         *    2. post   真实DOM更新后
         *    3. sync   真实DOM更新前，且是同步更新，不等待【不推荐】
         */
        flush: "post",
      }
    );

    // 2. 监听一个 reactive 数据
    //    默认是深度监听的，无需开启 deep
    // watch(person, () => {
    //   console.log("person change le");
    // });

    // 3. 监听一个 reactive 数据的某个属性 *重要*
    //    需要将第一个参数，设置为一个 getter 函数
    //    person.city = {name: '广州'} 可被监听
    //    person.city.name = '广州'    无法被监听，如果需要，可以配置 deep
    watch(
      () => person.city,
      () => {
        console.log("person.city 修改了");
      },
      {
        deep: true,
      }
    );

    return {
      count,
      person,
      handleClick,
    };
  },
};
</script>
